import css from "../../styles/modules/store.module.css";
import ProfileCard from "./ProfileCard.tsx";
import Book from "../../model/Book.ts";

const ProfileBooksContainer = (props: {items: Book[]}) => {


    const {items} = props

    return (


            <div className="container mt-3 container-content" id={"profile-books-container"}>

                <div id={"p-books-container-header"}
                     className={`"row d-flex justify-content-between align-items-center rowHeader" ${css.rowHeader}`}>
                    <h1 id="scrollspyHeadingFish" className={`"display-1 h1-category-name"  ${css.rowName}`}>My Books</h1>
                </div>

                <div className="row row-cols-1 mt-0 row-cols-sm-2 row-cols-md-4 g-3 card-row">
                    {
                        items.map((book) => (
                            <ProfileCard book={book}/>
                        ))
                    }
                </div>
            </div>
    )
}

export default ProfileBooksContainer